import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_cropper/image_cropper.dart';
import 'package:image_picker/image_picker.dart';
import 'package:yurun_smartmerchants/global.dart';
import 'package:yurun_smartmerchants/models/approach_commit_entity.dart';
import 'package:yurun_smartmerchants/models/approach_save_request_entity.dart';
import 'package:yurun_smartmerchants/models/car_add_entity.dart';
import 'package:yurun_smartmerchants/models/car_query_entity.dart';
import 'package:yurun_smartmerchants/models/pic_entity.dart';
import 'package:yurun_smartmerchants/net/ApiInterface.dart';
import 'package:yurun_smartmerchants/net/NetUtil.dart';
import 'package:yurun_smartmerchants/res/colours.dart';
import 'package:yurun_smartmerchants/routes/routes.dart';
import 'package:yurun_smartmerchants/utils/app_size.dart';
import 'package:oktoast/oktoast.dart';
import 'package:yurun_smartmerchants/utils/base64.dart';
import 'package:yurun_smartmerchants/utils/StringUtils.dart';
import 'package:yurun_smartmerchants/utils/evenbus_utils.dart';
import 'package:yurun_smartmerchants/utils/loading_utils.dart';
import 'package:yurun_smartmerchants/view/city_picker.dart';
import 'package:yurun_smartmerchants/view/goods_picker.dart';

class ApproachForecast extends StatefulWidget {
  @override
  _ApproachForecastState createState() => _ApproachForecastState();
}

class _ApproachForecastState extends State<ApproachForecast> {
  var bus = EventBus();
  final _picker = ImagePicker();
  String name, phone; //货主姓名，联系电话
  List<ApproachCommit> items = List();
  int position = 0;
  var weightControllerList = List<TextEditingController>();
  var _commentFocus = FocusNode();

  //final weightController = TextEditingController();
  String arrivalDate = null; //预计到货日期
  Map<String, dynamic> goodsMap = {};
  CarQueryContent carQueryContent;
  var approachSaveEntity = ApproachSaveEntity();
  String consumerId;

  @override
  void initState() {
    super.initState();
    name = Global.prefs.getString(Global.merchantName);
    phone = Global.prefs.getString(Global.phone);
    consumerId = Global.prefs.getString(Global.consumer_id);
    for (int i = 0; i < 3; i++) {
      position = i;
      items.add(ApproachCommit());
      weightControllerList.add(TextEditingController());
    }

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      getGoodsClassification();
    });

    bus.on("carType", (arg) {
      setState(() {
        carQueryContent = arg;
      });
    });

    bus.on("deleteCar", (id) {
      setState(() {
        if (carQueryContent != null && carQueryContent.id == id) {
          carQueryContent = null;
        }
      });
    });
  }

  @override
  void dispose() {
    super.dispose();
    bus.off("carType");
    bus.off("deleteCar");
    if (weightControllerList != null) {
      for (int i = 0; i < weightControllerList.length; i++) {
        weightControllerList[i].dispose();
        weightControllerList.removeAt(i);
      }
    }
  }

  void getGoodsClassification() {
    LoadingUtil.showLoading(context, tip: '加载中...');
    ApiInterface.getGoodsClassification().then((value) {
      goodsMap = value;
      setState(() {});
    }).whenComplete(() => LoadingUtil.hideLoading(context));
  }

  void save() {
    LoadingUtil.showLoading(context, tip: '加载中...');
    ApiInterface.saveCar(approachSaveEntity).then((value) {
      CarAddEntity carAddEntity = CarAddEntity.fromJson(value);
      if (carAddEntity.success) {
        //跳转到待进场列表
        bus.send("viewPagerCar", "");
        showToast("保存成功");
      }
      setState(() {});
    }).catchError((error) {
      if (error is LogicError) {
        showToast(error.msg);
      }
    }).whenComplete(() => LoadingUtil.hideLoading(context));
  }

  void uploadImage(String files, String ext, String fileName, int postion) {
    LoadingUtil.showLoading(context, tip: '照片上传中...');
    ApiInterface.uploadPublicImage(files, ext, fileName).then((data) {
      PicEntity picEntity = PicEntity.fromJson(data);
      setState(() {
        items[postion].goodsPicUrl = picEntity.content[0].path;
        items[postion].goodsPicId = picEntity.content[0].id;
      });
      //上传图片成功处理
      showToast("上传照片成功");
    }).catchError((onError) {
      showToast("上传照片失败");
    }).whenComplete(() => LoadingUtil.hideLoading(context));
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        width: double.infinity,
        height: double.infinity,
        color: Colours.gray_ef,
        child: ListView.builder(
            itemCount: items.length,
            itemBuilder: (BuildContext context, int position) {
              if (position == 0) {
                return itemWidget(context, position);
              } else if (position == items.length - 1) {
                return bottomWidget(context, position);
              } else {
                return newitemWidget(context, position);
              }
            }));
  }

  Widget itemWidget(BuildContext context, int index) {
    return Column(
      children: <Widget>[
        Container(
          margin: EdgeInsets.only(top: AppSize.sp(20)),
          width: double.infinity,
          height: AppSize.sp(98),
          color: Colours.white,
          alignment: Alignment.center,
          child: Stack(
            children: <Widget>[
              Container(
                  alignment: Alignment(-1, 0),
                  margin: EdgeInsets.only(left: AppSize.sp(32)),
                  child: RichText(
                    text: TextSpan(
                      text: '货主姓名',
                      style: TextStyle(
                          color: Colours.color_313131,
                          fontSize: AppSize.sp(32)),
                      children: <TextSpan>[
                        TextSpan(
                            text: ' *',
                            style: TextStyle(
                                color: Colours.app_main,
                                fontSize: AppSize.sp(32))),
                      ],
                    ),
                  )),
              Container(
                  margin: EdgeInsets.only(right: AppSize.sp(32)),
                  alignment: Alignment.centerRight,
                  child: Text(
                    name == null ? "" : name,
                    style: TextStyle(
                        fontSize: AppSize.sp(32), color: Colours.color_313131),
                  )),
            ],
          ),
        ),
        Container(
          margin: EdgeInsets.only(top: AppSize.sp(1)),
          width: double.infinity,
          height: AppSize.sp(98),
          color: Colours.white,
          alignment: Alignment.center,
          child: Stack(
            children: <Widget>[
              Container(
                  alignment: Alignment(-1, 0),
                  margin: EdgeInsets.only(left: AppSize.sp(32)),
                  child: RichText(
                    text: TextSpan(
                      text: '联系电话',
                      style: TextStyle(
                          color: Colours.color_313131,
                          fontSize: AppSize.sp(32)),
                      children: <TextSpan>[
                        TextSpan(
                            text: ' *',
                            style: TextStyle(
                                color: Colours.app_main,
                                fontSize: AppSize.sp(32))),
                      ],
                    ),
                  )),
              Container(
                  margin: EdgeInsets.only(right: AppSize.sp(32)),
                  alignment: Alignment.centerRight,
                  child: Text(
                    phone == null ? "" : phone,
                    style: TextStyle(
                        fontSize: AppSize.sp(32), color: Colours.color_313131),
                  )),
            ],
          ),
        ),
        Container(
          width: double.infinity,
          height: AppSize.sp(98),
          margin: EdgeInsets.only(top: AppSize.sp(20)),
          color: Colours.white,
          alignment: Alignment.center,
          child: Row(
            children: <Widget>[
              Container(
                  margin: EdgeInsets.only(left: AppSize.sp(32)),
                  child: RichText(
                    text: TextSpan(
                      text: '预计到货日期',
                      style: TextStyle(
                          color: Colours.color_313131,
                          fontSize: AppSize.sp(32)),
                      children: <TextSpan>[
                        TextSpan(
                            text: ' *',
                            style: TextStyle(
                                color: Colours.app_main,
                                fontSize: AppSize.sp(32))),
                      ],
                    ),
                  )),
              Spacer(),
              GestureDetector(
                  onTap: () {
                    _commentFocus.unfocus();
                    showDefaultYearPicker(context);
                  },
                  child: Container(
                      margin: EdgeInsets.only(right: AppSize.sp(12)),
                      child: Text(
                        arrivalDate == null ? '请选择预计到货日期' : arrivalDate,
                        style: arrivalDate == null
                            ? TextStyle(
                                fontSize: AppSize.sp(32),
                                color: Colours.color_abacb5)
                            : TextStyle(
                                fontSize: AppSize.sp(32),
                                color: Colours.color_313131),
                      ))),
              Container(
                margin: EdgeInsets.only(right: AppSize.sp(32)),
                child: Image.asset(
                  'images/approach_more.png',
                  width: AppSize.width(16),
                  height: AppSize.height(26),
                ),
              )
            ],
          ),
        ),
        Container(
          width: double.infinity,
          height: AppSize.sp(98),
          margin: EdgeInsets.only(top: AppSize.sp(1)),
          color: Colours.white,
          alignment: Alignment.center,
          child: Row(
            children: <Widget>[
              Container(
                  margin: EdgeInsets.only(left: AppSize.sp(32)),
                  child: RichText(
                    text: TextSpan(
                      text: '货物来源',
                      style: TextStyle(
                          color: Colours.color_313131,
                          fontSize: AppSize.sp(32)),
                      children: <TextSpan>[
                        TextSpan(
                            text: ' *',
                            style: TextStyle(
                                color: Colours.app_main,
                                fontSize: AppSize.sp(32))),
                      ],
                    ),
                  )),
              Spacer(),
              GestureDetector(
                  onTap: () {
                    _commentFocus.unfocus();
                    CityPicker.showCityPicker(context,
                        selectProvince: (province) {
                      print(province);
                      items[index].provinceCode = province["code"];
                      items[index].province = province["name"];
                    }, selectCity: (city) {
                      print(city);
                      setState(() {
                        items[index].cityCode = city["code"];
                        items[index].city = city["name"];
                      });
                    });
                  },
                  child: Container(
                      margin: EdgeInsets.only(right: AppSize.sp(12)),
                      child: Text(
                        items[index].city == null
                            ? "请选择货物来源"
                            : items[index].city,
                        style: items[index].city == null
                            ? TextStyle(
                                fontSize: AppSize.sp(32),
                                color: Colours.color_abacb5)
                            : TextStyle(
                                fontSize: AppSize.sp(32),
                                color: Colours.color_313131),
                      ))),
              Container(
                margin: EdgeInsets.only(right: AppSize.sp(32)),
                child: Image.asset(
                  'images/approach_more.png',
                  width: AppSize.width(16),
                  height: AppSize.height(26),
                ),
              )
            ],
          ),
        ),
        Container(
          width: double.infinity,
          height: AppSize.sp(98),
          margin: EdgeInsets.only(top: AppSize.sp(1)),
          color: Colours.white,
          alignment: Alignment.center,
          child: Row(
            children: <Widget>[
              Container(
                  margin: EdgeInsets.only(left: AppSize.sp(32)),
                  child: RichText(
                    text: TextSpan(
                      text: '进场车辆',
                      style: TextStyle(
                          color: Colours.color_313131,
                          fontSize: AppSize.sp(32)),
                      children: <TextSpan>[
                        TextSpan(
                            text: ' *',
                            style: TextStyle(
                                color: Colours.app_main,
                                fontSize: AppSize.sp(32))),
                      ],
                    ),
                  )),
              Spacer(),
              GestureDetector(
                  onTap: () {
                    _commentFocus.unfocus();
                    Navigator.pushNamed(context, approach_choose_car);
                  },
                  child: Container(
                      margin: EdgeInsets.only(right: AppSize.sp(12)),
                      child: Text(
                        carQueryContent == null
                            ? "请选择进场车辆"
                            : (StringUtils.isEmpty(
                                    carQueryContent.provinceShortName)
                                ? "无车牌(" +
                                    carQueryContent.tare.toString() +
                                    "吨)"
                                : carQueryContent.provinceShortName +
                                    carQueryContent.licencePlate +
                                    "(" +
                                    carQueryContent.tare.toString() +
                                    "吨)"),
                        style: carQueryContent == null
                            ? TextStyle(
                                fontSize: AppSize.sp(32),
                                color: Colours.color_abacb5)
                            : TextStyle(
                                fontSize: AppSize.sp(32),
                                color: Colours.color_313131),
                      ))),
              Container(
                margin: EdgeInsets.only(right: AppSize.sp(32)),
                child: Image.asset(
                  'images/approach_more.png',
                  width: AppSize.width(16),
                  height: AppSize.height(26),
                ),
              )
            ],
          ),
        ),
      ],
    );
  }

  Widget newitemWidget(BuildContext context, int index) {
    return Column(children: <Widget>[
      Container(
        width: double.infinity,
        height: AppSize.sp(98),
        margin: EdgeInsets.only(top: AppSize.sp(20)),
        color: Colours.white,
        alignment: Alignment.center,
        child: Row(
          children: <Widget>[
            Container(
                margin: EdgeInsets.only(left: AppSize.sp(32)),
                child: RichText(
                  text: TextSpan(
                    text: '商品0' + index.toString(),
                    style: TextStyle(
                        color: Colours.green_62, fontSize: AppSize.sp(32)),
                    children: <TextSpan>[
                      TextSpan(
                          text: ' *',
                          style: TextStyle(
                              color: Colours.app_main,
                              fontSize: AppSize.sp(32))),
                    ],
                  ),
                )),
            Spacer(),
            GestureDetector(
                onTap: () {
                  _commentFocus.unfocus();
                  GoodsPicker.showGoodsPicker(context, goodsMap,
                      selectProvince: (goodsI) {
                    print(goodsI);
                  }, selectCity: (goodII) {
                    print(goodII);
                  }, selectArea: (goodIII) {
                    print(goodIII);
                    setState(() {
                      items[index].goodsID = goodIII["value"];
                      items[index].goodsName = goodIII["label"];
                    });
                  });
                },
                child: Container(
                    margin: EdgeInsets.only(right: AppSize.sp(12)),
                    child: Text(
                      items[index].goodsName == null
                          ? '请选择商品'
                          : items[index].goodsName,
                      style: items[index].goodsName == null
                          ? TextStyle(
                              fontSize: AppSize.sp(32),
                              color: Colours.color_abacb5)
                          : TextStyle(
                              fontSize: AppSize.sp(32),
                              color: Colours.color_313131),
                    ))),
            Container(
              margin: EdgeInsets.only(right: AppSize.sp(32)),
              child: Image.asset(
                'images/approach_more.png',
                width: AppSize.width(16),
                height: AppSize.height(26),
              ),
            )
          ],
        ),
      ),
      Container(
        margin: EdgeInsets.only(top: AppSize.sp(1)),
        width: double.infinity,
        height: AppSize.sp(98),
        color: Colours.white,
        alignment: Alignment.center,
        child: Stack(
          children: <Widget>[
            Container(
                alignment: Alignment(-1, 0),
                margin: EdgeInsets.only(left: AppSize.sp(32)),
                child: RichText(
                  text: TextSpan(
                    text: '重量',
                    style: TextStyle(
                        color: Colours.green_62, fontSize: AppSize.sp(32)),
                    children: <TextSpan>[
                      TextSpan(
                          text: ' *',
                          style: TextStyle(
                              color: Colours.app_main,
                              fontSize: AppSize.sp(32))),
                    ],
                  ),
                )),
            Container(
                child: TextField(
              focusNode: _commentFocus,
              textAlign: TextAlign.right,
              keyboardType: TextInputType.numberWithOptions(decimal: true),
              controller: weightControllerList[index],
              style: TextStyle(
                  color: Colours.color_313131, fontSize: AppSize.sp(32)),
              onChanged: (String str) {
                items[index].weight = str;
              },
              decoration: InputDecoration(
                  contentPadding: EdgeInsets.only(right: AppSize.sp(80)),
                  border: InputBorder.none,
                  counterText: '',
                  hintText: "输入货物重量",
                  hintStyle: TextStyle(
                      fontSize: AppSize.sp(32), color: Colours.color_abacb5)),
              maxLength: 9,
            )),
            Container(
              alignment: Alignment.centerRight,
              margin: EdgeInsets.only(right: AppSize.sp(32)),
              child: Text(
                "吨",
                style: TextStyle(
                    fontSize: AppSize.sp(32), color: Colours.color_313131),
              ),
            )
          ],
        ),
      ),
      Container(
        margin: EdgeInsets.only(top: AppSize.sp(1)),
        width: double.infinity,
        height: AppSize.sp(280),
        color: Colours.white,
        child: Row(
          children: <Widget>[
            Container(
                alignment: Alignment.topLeft,
                margin:
                    EdgeInsets.only(top: AppSize.sp(36), left: AppSize.sp(32)),
                child: Text("来源凭证",
                    style: TextStyle(
                        color: Colours.green_62, fontSize: AppSize.sp(32)))),
            Spacer(),
            GestureDetector(
                onTap: () {
                  _commentFocus.unfocus();
                  showModalBottomSheet(
                      context: context,
                      builder: (BuildContext context) {
                        return _showNomalWid(context, index);
                      });
                },
                child: Container(
                  width: AppSize.width(176),
                  height: AppSize.height(238),
                  color: Colours.color_eff0f2,
                  alignment: Alignment.center,
                  margin: EdgeInsets.only(right: AppSize.sp(32)),
                  child: items[index].goodsPicUrl == null
                      ? Image.asset(
                          'images/approach_good_add.png',
                          width: AppSize.width(46),
                          height: AppSize.height(46),
                        )
                      : Image.network(items[index].goodsPicUrl,
                          width: AppSize.width(176),
                          height: AppSize.height(238),
                          fit: BoxFit.cover),
                ))
          ],
        ),
      ),
      Offstage(
          offstage: index == position - 1 ? false : true,
          child: Container(
            margin: EdgeInsets.only(top: AppSize.sp(1)),
            width: double.infinity,
            height: AppSize.sp(98),
            color: Colours.white,
            alignment: Alignment.center,
            child: Row(
              children: <Widget>[
                GestureDetector(
                    onTap: () {
                      if (position <= 2) {
                        showToast("至少保留一个商品");
                        return;
                      }
                      weightControllerList[position].dispose();
                      weightControllerList.removeAt(position);
                      setState(() {
                        items.removeAt(position--);
                      });
                    },
                    child: Container(
                        width: AppSize.width(320),
                        alignment: Alignment.center,
                        height: AppSize.height(76),
                        margin: EdgeInsets.only(left: AppSize.sp(32)),
                        decoration: new BoxDecoration(
                          color: Colors.white,
                          borderRadius:
                              BorderRadius.all(Radius.circular(AppSize.sp(6))),
                          border: new Border.all(
                              width: 1, color: Colours.color_aaaaaa),
                        ),
                        child: Text("删除",
                            style: TextStyle(
                                color: Colours.green_62,
                                fontSize: AppSize.sp(32))))),
                Spacer(),
                GestureDetector(
                    onTap: () {
                      weightControllerList.add(TextEditingController());
                      setState(() {
                        ++position;
                        items.add(ApproachCommit());
                      });
                    },
                    child: Container(
                      width: AppSize.width(320),
                      alignment: Alignment.center,
                      height: AppSize.height(76),
                      margin: EdgeInsets.only(right: AppSize.sp(32)),
                      decoration: new BoxDecoration(
                        color: Colors.white,
                        borderRadius:
                            BorderRadius.all(Radius.circular(AppSize.sp(6))),
                        border: new Border.all(
                            width: 1, color: Colours.color_dd4b39),
                      ),
                      child: Text("添加商品",
                          style: TextStyle(
                              color: Colours.color_dd4b39,
                              fontSize: AppSize.sp(32))),
                    ))
              ],
            ),
          )),
    ]);
  }

  Widget bottomWidget(BuildContext context, int index) {
    return GestureDetector(
        onTap: () {
          if (approachSaveEntity.arrivalTime == null) {
            showToast("请选择货物日期");
            return;
          }
          if (items[0].provinceCode == null) {
            showToast("请选择货物来源");
            return;
          }
          if (carQueryContent == null || carQueryContent.id == null) {
            showToast("请选择进场车辆");
            return;
          }

          var enterAreaDetails = List<ApproachSaveEnterareadetail>();
          approachSaveEntity.consumerId = int.parse(consumerId);
          approachSaveEntity.provinceCode = int.parse(items[0].provinceCode);
          approachSaveEntity.provinceName = items[0].province;
          approachSaveEntity.cityCode = int.parse(items[0].cityCode);
          approachSaveEntity.cityName = items[0].city;
          approachSaveEntity.vehicleId = carQueryContent.id;
          for (int i = 1; i < items.length - 1; i++) {
            if (items[i].goodsID == null) {
              showToast("请选择商品0" + i.toString());
              return;
            }
            if (items[i].weight == null) {
              showToast("请选择商品0" + i.toString() + "的重量");
              return;
            }
            var imageList = List<ApproachSaveEnterareadetailsImage>();
            var approachSaveEnterareadetail = ApproachSaveEnterareadetail();
            approachSaveEnterareadetail.categoryId = items[i].goodsID;
            approachSaveEnterareadetail.weight = double.parse(items[i].weight);
            if (items[i].goodsPicId != null) {
              for (int j = 0; j < 1; j++) {
                var approachSaveEnterareadetailsImage =
                    ApproachSaveEnterareadetailsImage();
                approachSaveEnterareadetailsImage.imageId = items[i].goodsPicId;
                approachSaveEnterareadetailsImage.imageUrl =
                    items[i].goodsPicUrl;
                imageList.add(approachSaveEnterareadetailsImage);
              }
            }
            approachSaveEnterareadetail.images = imageList;
            enterAreaDetails.add(approachSaveEnterareadetail);
          }
          approachSaveEntity.enterAreaDetails = enterAreaDetails;
          save();
        },
        child: Container(
            margin: EdgeInsets.only(
                left: AppSize.sp(32),
                right: AppSize.sp(32),
                top: AppSize.sp(64),
                bottom: AppSize.sp(64)),
            height: AppSize.height(88),
            alignment: Alignment.center,
            decoration: new BoxDecoration(
              color: Colours.app_main,
              borderRadius: BorderRadius.all(
                Radius.circular(AppSize.sp(6)),
              ),
            ),
            child: Container(
                alignment: Alignment.center,
                child: Text(
                  "保存",
                  style:
                      TextStyle(color: Colours.white, fontSize: AppSize.sp(32)),
                ))));
  }

  void showDefaultYearPicker(BuildContext context) {
    showDatePicker(
      context: context,
      initialDate: new DateTime.now(),
      //定义控件最早可以选择的日期
      firstDate: DateTime(2020, 1),
      //定义控件最晚可以选择的日期
      lastDate: DateTime(2030, 1),
    ).then((DateTime dateTime) {
      setState(() {
        approachSaveEntity.arrivalTime = dateTime.millisecondsSinceEpoch;
        arrivalDate = dateTime.year.toString() +
            "-" +
            dateTime.month.toString() +
            "-" +
            dateTime.day.toString();
      });
    }).catchError((err) {
      showToast(err);
    });
  }

  Widget _showNomalWid(BuildContext context, int postion) {
    return new Container(
        height: AppSize.height(200),
        child: Column(
          children: <Widget>[
            GestureDetector(
                onTap: () {
                  getPic(postion);
                },
                child: Container(
                  child: Text("拍照"),
                  height: AppSize.height(98),
                  width: double.infinity,
                  color: Colours.white,
                  alignment: Alignment.center,
                )),
            Container(
              height: AppSize.height(1),
              width: double.infinity,
              color: Colours.color_dcdcdc,
            ),
            GestureDetector(
                onTap: () {
                  getLocalPic(postion);
                },
                child: Container(
                  child: Text("相册"),
                  height: AppSize.height(98),
                  width: double.infinity,
                  color: Colours.white,
                  alignment: Alignment.center,
                ))
          ],
        ));
  }

  Future getPic(int postion) async {
    PickedFile image = await _picker.getImage(source: ImageSource.camera);
    if (image != null) {
      File croppedFile = await ImageCropper.cropImage(
        sourcePath: image.path,
        maxWidth: 512,
        maxHeight: 512,
      );
      handlePic(croppedFile, postion);
    }
    Navigator.of(context).pop();
  }

  Future getLocalPic(int postion) async {
    PickedFile image = await _picker.getImage(source: ImageSource.gallery);
    if (image != null) {
      File croppedFile = await ImageCropper.cropImage(
        sourcePath: image.path,
        maxWidth: 512,
        maxHeight: 512,
      );
      handlePic(croppedFile, postion);
    }
    Navigator.of(context).pop();
  }

  void handlePic(File image, int postion) {
    String fileName = image.path
        .substring(image.path.lastIndexOf('/') + 1, image.path.length)
        .toString();
    String ext = image.path
        .substring(image.path.lastIndexOf('.') + 1, image.path.length)
        .toString();
    Base64Tool.imageBase64(image.path).then((base64Str) {
      uploadImage(base64Str, ext, fileName, postion);
    });
  }
}
